import { message, Table as AntdTable } from 'antd';
import Column from 'antd/es/table/Column';
import WidgetImg from '@components/widget/WidgetImg'
import TableCoulumAction from './TableCoulumAction'
import { DeepGet } from '@plugins/support';
import WidgetText from '@/components/widget/WidgetText';
import { API, ApiModelProps } from '@/request/api';
interface TableProps<T>{
    items:T[],
    onDelete:Function,
    column:TableColumn[],
    api:keyof ApiModelProps,
}
interface TableColumn{
   key:string,
   title:string,
   type:string,
   value?:Object
}

const Table = <T extends Object>(props:TableProps<T>) => {
    const onDelete = (id:string) => {
            API[props.api](id).then(()=>{
                message.success("删除成功!");
                props.onDelete();
            })
    }

    const onEdit = (e:any) => {
        console.log(e);
    }
      const getCoulum =() => {
      return  props.column.map((i:TableColumn,d:number) => {             
            const formatItemCoulum = (t:string) =>({
                'TEXT': <Column align="center" title={i.title} dataIndex={i.key} key={i.title} />,
                 "IMG":<Column  align="center" title="图片" dataIndex={i.key} key={i.title} render={ (src) =>
                    <WidgetImg src={'https:' + src}/>
                }></Column>,
                "ACTION":<Column fixed="right" align="center"  title="操作"  key={i.title} render={ (item) =>
                    <TableCoulumAction 
                    id={DeepGet(item,'id')} 
                    url={DeepGet(item,'src')} 
                    onDelete={onDelete} 
                    onEdit={onEdit}/>
                }></Column>,
                "STATUS":<Column align='center'  title={i.title} dataIndex={i.key} key={i.title}  render={(item) => 
                <WidgetText subKey={item} value={i.value || {}}/>}></Column>
            })[t]
            return formatItemCoulum(i.type)
        })
      }
    return (
        <AntdTable dataSource={props.items} pagination={false} rowKey="id">
           {getCoulum()}
        </AntdTable>
    )
}
export default Table;
export type{TableProps,TableColumn}